<!-- 
  - 首页
 -->

<!-- 视图层 --><!-- 页头(上) -->
<template><header-comp />

<!-- 功能一览 -->
<uni-card title="应用简介">
  <!-- 通告栏 -->
  <uni-notice-bar text=
    "本在线软件（WebApp）以药学 / 化学的各类教学 / 科研数据的采集与处理工作为着眼点，拟借助各类数字化技术（统计机器学习方法、计算机视觉方法、各类神经网络深度学习方法等），旨在解决数据相关的各类需求。
    目前正在开展的工作栈有：
    1. 拉曼光谱（及其他波谱）的数据处理。
    2. 手机摄像头 + 深度学习技术解决胶体与界面化学相关问题。
    3. 计算机视觉模型解决比色法的化学动力学相关问题。
    如有任何问题，请随时联系我们！"
  />

  <!-- 二级标题：应用源码 -->
  <uni-section
    title="本应用源代码"
    type="circle"
    padding="0 1em"
  >
    <!-- 源码链接 -->
    <uni-link
      text="https://gitcode.com/roxszi/tfjs-uni"
      href="https://gitcode.com/roxszi/tfjs-uni"
      class="center" color="blue" fontSize="16"
    />
  </uni-section>

</uni-card>

<!-- 深度学习 -->
<uni-card title="深度学习业务">
  <!-- 通告栏 -->
  <uni-notice-bar text=
    "即多层神经网络模型的学习方法。支持普通的神经网络（多层感知机MLP），卷积神经网络CNN、循环神经网络（递归神经网络）RNN，等。
    以深度学习的流程顺序展开。含数据准备、模型构造、模型训练、模型预测等流程。
    已完成：数据准备、拉曼深度学习案例。
    未完成：模型构造、模型训练、模型预测。"
  />

  <!-- 二级标题：业务简介 -->
  <uni-section
    title="业务简介"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字 -->
    <view><text>
      　　深度学习，即构建多层神经网络模型，“深度”即“多层”。\n
      　　就模型种类而言，有普通的神经网络（即多层感知机，Multilayer Perceptron, MLP），卷积神经网络（Convolutional Neural Network, CNN）、循环神经网络（即递归神经网络，Recurrent Neural Network, RNN），等等。\n
      　　本业务将以深度学习的各流程为功能接口，展开深度学习。
    </text></view>
  </uni-section>

  <!-- 二级标题：数据准备 -->
  <uni-section
    title="数据准备"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字内容 -->
    <view><text>
      　　需要一个格式合规、内容合适的数据集文件。“格式合规”在于数据格式应为矩阵(张量)形式。“内容合适”在于数据集的不同特征应能在标签中体现出足够且有规律的差异，以能够被深度学习模型所使用。\n
      　　对于拉曼光谱数据，首先需要进行基线校正(可选)。通过基线校正，可使信号质量得到增强。然后需要进行峰拟合，以进一步清洗数据(必选)。\n
      　　【基线校正】“统计机器学习业务”中的“多项式迭代回归”“滚球算法”“迭代自适应加权最小二乘”等均可实现基线校正。\n
      　　【峰拟合】“统计机器学习业务”中的“全波谱去卷积”可实现峰拟合。\n
      　　完成基线校正与峰拟合后的数据，即完成了训练前的准备工作，可进行下一步操作。
    </text></view>
  </uni-section>

  <!-- 二级标题：案例-拉曼深度学习案例 -->
  <uni-section
    title="案例-拉曼深度学习"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字内容 -->
    <view><text>
      　　以深度学习方法，实现利用拉曼光谱数据对待测物进行定性及定量的案例。
    </text></view>
    <!-- 页内导航 -->
    <view class="center">
      <button
        @click="goToPage('../case/raman')"
        size="mini" type="primary"
      >
        拉曼深度学习案例
      </button>
    </view>
  </uni-section>

  <!-- 二级标题：案例-接触角迁移学习 -->
  <uni-section
    title="案例-接触角迁移学习"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字内容 -->
    <view><text>
      　　以卷积神经网络 + 迁移学习方法，实现对水滴照片的接触角图像识别的案例。
    </text></view>
    <!-- 页内导航 -->
    <view class="center">
      <button
        @click="goToPage('../case/contact-angle')"
        size="mini" type="primary"
      >
        接触角卷积迁移学习案例
      </button>
    </view>
  </uni-section>

  <!-- 二级标题：案例-拉曼定性/定量预测 -->
  <uni-section
    title="案例-拉曼定性/定量预测"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字内容 -->
    <view><text>
      　　以深度学习方法，结合卷积神经网络、循环(递归)神经网络、迁移学习等策略，实现拉曼光谱对待测物的定性/定量预测。\n
      　　仍在开发中...
    </text></view>
    <!-- 页内导航 -->
    <view class="center">
      <button
        :disabled="testModuleBoolean"
        @click="goToPage('../case/raman-backend')"
        size="mini" type="primary"
      >
        拉曼定性/定量预测案例
      </button>
    </view>
  </uni-section>


</uni-card>

<!-- 统计与机器学习 -->
<uni-card title="统计与机器学习业务">
  <!-- 通告栏 -->
  <uni-notice-bar text=
    "除深度学习以外的统计方法、普通机器学习方法。如支持向量机SVM，主成分分析PCA，偏最小二乘PLS，等等。
    目前精力主要用于解决波谱数据的基线校正、峰拟合等业务。
    已完成：airPLS、GSD、STFT。
    未完成：PLS、PCA、SVM。"
  />

  <!-- 二级标题：业务简介 -->
  <uni-section
    title="业务简介"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字 -->
    <view><text>
      　　准备收录几个药学化学领域最常用的几个常规的统计方法及机器学习方法。已经做好了的可以直接进入；没做好的会放上主要依赖库的链接，作为功能前瞻。\n
      　　后期会根据实验需要逐渐扩展实现，如有谁已经做了一些功能且愿意分享出来的，欢迎联系我！\n
      　　PS：朴素贝叶斯、随机森林、K-聚类、K-近邻、逻辑回归这些方法，感觉在药学化学领域不咋用了，就不收录了。
    </text></view>
  </uni-section>

  <!-- 二级标题：多项式迭代回归 -->
  <uni-section
    title="多项式迭代回归"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字内容 -->
    <view><text>
      　　多项式迭代回归（Polynomial Iterative Regression）。\n
      　　基线校正算法，参数简单可控，符合拉曼谱图基线校正的基本需求。
    </text></view>
    <!-- 页内导航 -->
    <view class="center">
      <button
        @click="goToPage('../machine_learning/poly-iter-reg')"
        size="mini" type="primary"
      >
        多项式迭代回归
      </button>
    </view>
  </uni-section>

  <!-- 二级标题：滚球算法 -->
  <uni-section
    title="滚球算法"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字内容 -->
    <view><text>
      　　滚球算法（Rolling-Ball Algorithm），也叫滚珠算法。\n
      　　这是一个简单的基线校正算法，灵感来源于计算机对图像的几何学处理。
    </text></view>
    <!-- 页内导航 -->
    <view class="center">
      <button
        @click="goToPage('../machine_learning/rolling-ball')"
        size="mini" type="primary"
      >
        滚球算法
      </button>
    </view>
  </uni-section>

  <!-- 二级标题：迭代自适应加权惩罚最小二乘 -->
  <uni-section
    title="迭代自适应加权惩罚最小二乘 airPLS"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字内容 -->
    <view><text>
      　　迭代自适应加权惩罚最小二乘（Adaptive Iterative Reweighted Penalized Least Squares, airPLS）。\n
      　　发展自惩罚最小二乘法（Penalized Least Squares, PLS），优化了迭代过程、自适应加权、惩罚项（正则化），是对波谱谱图进行基线拟合、扣除基线的有效方法。
    </text></view>
    <!-- 页内导航 -->
    <view class="center">
      <button
        @click="goToPage('../machine_learning/airpls')"
        size="mini" type="primary"
      >
        迭代自适应加权惩罚最小二乘 airPLS
      </button>
    </view>
  </uni-section>

  <!-- 二级标题：全波谱去卷积 -->
  <uni-section
    title="全波谱去卷积 GSD"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字内容 -->
    <view><text>
      　　全波谱去卷积（Global Spectra Deconvolution, GSD）。\n
      　　传统的统计学方法，发展自波谱去卷积算法（Spectral Deconvolution, SD），是对整个波谱谱图进行标峰、峰型确认、谱图平滑等操作的常规方法。
    </text></view>
    <!-- 页内导航 -->
    <view class="center">
      <button
        @click="goToPage('../machine_learning/gsd')"
        size="mini" type="primary"
      >
        全波谱去卷积 GSD
      </button>
    </view>
  </uni-section>

  <!-- 二级标题：PLS -->
  <uni-section
    title="偏最小二乘 PLS"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字内容 -->
    <view><text>
      　　偏最小二乘（Partial Least Squares, PLS）。\n
      　　监督学习的回归方法，旨在最小化预测误差的同时，保持数据集的内在结构不变。\n
      　　库链接：
    </text></view>
    <!-- 链接 -->
    <uni-link
      text="https://www.npmjs.com/package/ml-pls"
      href="https://www.npmjs.com/package/ml-pls"
      class="center" color="blue"
    />
  </uni-section>

  <!-- 二级标题：PCA -->
  <uni-section
    title="主成分分析 PCA"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字内容 -->
    <view><text>
      　　主成分分析（Principal component analysis, PCA）。\n
      　　无监督学习的数据降维方法。\n
      　　库链接：
    </text></view>
    <!-- 链接 -->
    <uni-link
      text="https://www.npmjs.com/package/ml-pca"
      href="https://www.npmjs.com/package/ml-pca"
      class="center" color="blue"
    />
  </uni-section>

  <!-- 二级标题：SVM -->
  <uni-section
    title="支持向量机 SVM"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字内容 -->
    <view><text>
      　　支持向量机（Support Vector Machine, SVM）。\n
      　　监督学习的分类方法，对已有数据集进行分离后，用分类边界的“支持向量”实现短平快的预测分类。\n
      　　库链接：
    </text></view>
    <!-- 链接 -->
    <uni-link
      text="https://www.npmjs.com/package/ml-svm"
      href="https://www.npmjs.com/package/ml-svm"
      class="center" color="blue"
    />
  </uni-section>

</uni-card>

<!-- 工具集 -->
<uni-card title="工具集">
  <!-- 通告栏 -->
  <uni-notice-bar text=
    "机器学习/深度学习、计算机视觉、硬件API联用的一些工具集。"
  />

  <!-- 图像采集 -->
  <uni-section
    title="图像采集"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字 -->
    <view><text>
      　　调用（手机）重力感应API辅助垂直校正，然后调用摄像头API采集图像。生成RGB矩阵，以便后续各类分析处理及深度学习等操作。
    </text></view>
    <!-- 页面跳转按钮 -->
    <view class="center">
      <button
        @click="goToPage('../case/cam')"
        size="mini" type="primary"
      >
        采集图像数据
      </button>
    </view>
  </uni-section>

  <!-- 计算机视觉-图像轮廓识别 -->
  <uni-section
    title="计算机视觉-图像轮廓识别"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字 -->
    <view><text>
      　　借助OpenCV库，实现样品轮廓的识别，并进一步满足各类业务需求。
    </text></view>
    <!-- 页面跳转按钮 -->
    <view class="center">
      <button
        @click="goToPage('../case/opencv-contour')"
        size="mini" type="primary"
      >
        图像轮廓识别
      </button>
    </view>
  </uni-section>

  <!-- 二级标题：案例-二维卷积神经网络模型训练 -->
  <uni-section
    title="案例-二维卷积神经网络模型训练"
    type="circle"
    padding="0 1em"
  >
    <!-- 文字内容 -->
    <view><text>
      　　读取本地文件夹内的照片、excel表格数据，实现图片输入-接触角输出的模型训练案例。
    </text></view>
    <!-- 页内导航 -->
    <view class="center">
      <button
        @click="goToPage('../case/cnn-2d-train')"
        size="mini" type="primary"
      >
        二维卷积神经网络模型训练
      </button>
    </view>
  </uni-section>

</uni-card>

<!-- 关于本应用 -->
<uni-card title="关于本应用">
  <!-- 文字内容 -->
  <view><text>
    　　以
    <uni-link
      text="uni-app (@Vue3) "
      href="https://uniapp.dcloud.net.cn/"
      color="blue"
    />
    构建的在线软件 (WebApp) 。\n
    　　极端安全。本质上就是个静态页面，打开之后，一切内容均在用户的电脑/手机端运行，完全不会往任何服务器发送数据，绝无后端（我的这个技术栈就是不用花钱租后端服务器的，毕竟我穷，所以没有后门啥的）。\n
    　　深度学习业务方面，选用了
    <uni-link
      text="Keras (@TensorFlow.js)"
      href="https://tensorflow.google.cn/js?hl=zh-cn"
      color="blue"
    />
    的技术栈。借助
    <uni-link
      text="TensorFlow.js原生对Keras API的实现"
      href="https://js.tensorflow.org/api/latest/?hl=zh-cn"
      color="blue"
    />
    ，完成便捷且通用的模型层搭建，极大降低学习成本与迁移门槛。并以TensorFlow.js运行层开启WebGPU硬件加速，只要有浏览器就能硬件加速机器学习，不存在部署问题，也不存在对CUDA硬件的依赖；且模型可直接在本页面下载/导入，真·即插即用。\n
    　　机器学习业务方面，主要选用了
    <uni-link
      text="ml.js"
      href="https://github.com/mljs/ml"
      color="blue"
    />
    的技术栈；计算机视觉方面，主要选用了
    <uni-link
      text="OpenCV.js"
      href="https://www.npmjs.com/package/@techstark/opencv-js"
      color="blue"
    />
    的技术栈。具体详见链接。\n
    　　一切旨在学习。热烈欢迎bug反馈即各类技术/知识交流！\n
    　　其它简介待完善...
  </text></view>
</uni-card>

<!-- 页脚(下) -->
<footer-comp /></template>

<script setup>
// 从入口文件引入各类全局方法
import { goToPage } from "../../scripts/app_common.js"
// 根据环境变量判断是否显示未完成模块
const testModuleBoolean = (process.env.NODE_ENV === "development") ? 
  false : true
</script>
